<template>
  <div class="page-content">
    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-6 gap-2">
      <div>
        <h1 class="text-2xl font-bold text-neutral-900">仪表库</h1>
        <p class="text-neutral-500 mt-1">知识库内容概览与统计</p>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
      <div class="bg-white rounded-lg border border-neutral-200 p-3">
        <p class="text-xs text-neutral-500">文档总数</p>
        <p class="text-2xl font-semibold text-neutral-900">{{ total }}</p>
      </div>
      <div class="bg-white rounded-lg border border-neutral-200 p-3">
        <p class="text-xs text-neutral-500">已收藏</p>
        <p class="text-2xl font-semibold text-neutral-900">{{ collectedCount }}</p>
      </div>
      <div class="bg-white rounded-lg border border-neutral-200 p-3">
        <p class="text-xs text-neutral-500">标签数</p>
        <p class="text-2xl font-semibold text-neutral-900">{{ tagCount }}</p>
      </div>
    </div>

    <div class="bg-white rounded-lg border border-neutral-200 p-3">
      <h3 class="font-semibold text-neutral-900 mb-2">按分类统计</h3>
      <div ref="chartRef" class="w-full h-64"></div>
    </div>
  </div>

</template>

<script setup lang="ts">
import * as echarts from 'echarts'

const allDocuments = ref([
  {
    title: '组件设计规范',
    description:
      '详细介绍了组件设计的原则、风格指南、交互模式和实现标准，确保团队开发的组件具有一致性。',
    tags: ['设计指南', '组件规范', 'UI/UX'],
    wordCount: '2.4k 字',
    updateTime: '昨天 09:15',
    isCollected: true,
    category: '设计指南',
  },
  {
    title: 'API 调用最佳实践',
    description:
      '介绍了 API 调用的最佳实践，包括错误处理、请求缓存、身份验证、速率限制和性能优化等方面的内容。',
    tags: ['开发指南', 'API', '最佳实践'],
    wordCount: '1.8k 字',
    updateTime: '1 周前',
    isCollected: false,
    category: '开发指南',
  },
  {
    title: '状态管理指南',
    description:
      '详细讲解了前端应用中的状态管理策略，包括本地状态、全局状态、服务端状态的管理方式和适用场景。',
    tags: ['开发指南', '状态管理', 'React', 'Vue'],
    wordCount: '3.2k 字',
    updateTime: '2 周前',
    isCollected: false,
    category: '开发指南',
  },
  {
    title: '项目部署流程',
    description:
      '描述了项目从开发环境到生产环境的完整部署流程，包括构建、测试、打包、发布和监控等环节。',
    tags: ['运维文档', '部署', 'CI/CD'],
    wordCount: '1.5k 字',
    updateTime: '3 周前',
    isCollected: false,
    category: '运维文档',
  },
])

const total = computed(() => allDocuments.value.length)
const collectedCount = computed(() => allDocuments.value.filter(d => d.isCollected).length)
const tagCount = computed(() => {
  const set = new Set<string>()
  allDocuments.value.forEach(d => d.tags.forEach(t => set.add(t)))
  return set.size
})

const chartRef = ref<HTMLElement | null>(null)

onMounted(() => {
  if (!chartRef.value) return
  const chart = echarts.init(chartRef.value)
  const byCategory = allDocuments.value.reduce<Record<string, number>>((acc, cur) => {
    acc[cur.category] = (acc[cur.category] || 0) + 1
    return acc
  }, {})
  const categories = Object.keys(byCategory)
  const values = categories.map(k => byCategory[k])
  chart.setOption({
    tooltip: {},
    xAxis: { type: 'category', data: categories },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: values }],
  })
  window.addEventListener('resize', () => chart.resize())
})
</script>

<style lang="scss" scoped></style>
